<!--
@license
Copyright 2017 GIVe Authors

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../ref-selector/ref-selector.html">
<link rel="import" href="../track-filter/track-filter.html">
<link rel="import" href="../track-meta-list/track-meta-list.html">
<link rel="import" href="../html-builder/html-builder.html">
<link rel="import" href="../genemo-styles.html">
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
<dom-module id="track-manager">
  <template>
    <style include="genemo-shared-styles iron-flex iron-flex-alignment iron-positioning">
      :host {
        position: relative;
        overflow-x: auto;
        @apply(--layout-vertical);
      }
      paper-toolbar {
        --paper-toolbar-background: var(--primary-background-color);
        --paper-toolbar-color: var(--primary-text-color);
      }
      paper-toolbar > div#htmlGeneratorButtons {
        padding: 0 0.5em;
      }
      paper-toolbar div paper-button {
        margin: 0 0.1em;
        background: var(--card-background-color);
      }
      paper-toolbar div paper-button[toggles] {
        transition: background-color 0.3s;
      }
      paper-toolbar div paper-button[toggles][active] {
        background-color: rgba(0, 0, 0, 0.2);
      }
      paper-button#clearFilterBtn {
        padding: 0.1em;
        min-width: 0;
        margin: -0.3em 0 -0.3em 0.5em;
      }
      paper-button#clearFilterBtn iron-icon {
        width: 1.5em;
        height: 1.5em;
      }
      paper-button.placeHoldingBtn {
        visibility: hidden;
      }
      paper-button.placeHoldingBtn[visible] {
        visibility: visible;
      }
    </style>
    <paper-toolbar>
      <content id="logo" select=".logo"></content>
      <span class="title">[[titleText]]</span>
      <ref-selector ref="{{currentRef}}"></ref-selector>
      <div id="filterButtons">
        <paper-button id="filterBtn" raised toggles active="{{_filterDialogOn}}"
          on-tap="toggleFilter" disabled$="[[!_calcIntroHidden(currentRef)]]">
          [[filterText]]
          <paper-button raised id="clearFilterBtn"
            hidden$="[[!_filterActive]]"
            on-tap="clearFilter">
            <iron-icon icon="clear"></iron-icon>
          </paper-button>
        </paper-button>
      </div>
      <div id="htmlGeneratorButtons">
        <paper-button raised toggles active="{{generatorMode}}">
          HTML Generator Mode
        </paper-button>
        <paper-button class="placeHoldingBtn" raised id="generateHtmlBtn"
          visible$="[[generatorMode]]"
          on-tap="generateHtml"
          disabled$="[[!numOfGroupsSelected]]">
          Generate
        </paper-button>
      </div>
    </paper-toolbar>
    <div class="layout vertical flex"
      hidden$="[[_calcIntroHidden(currentRef)]]">
      <content id="introDiv" select=".managerIntro"></content>
    </div>
    <track-meta-list id="mainMetaList" class="flex self-center"
      ref="[[currentRef]]" selection-enabled$="[[generatorMode]]"
      num-of-groups-selected="{{numOfGroupsSelected}}"
      hidden$="[[!currentRef]]" filter-obj="[[_trackFilter]]">
    </track-meta-list>
    <html-builder id="mainHtmlBuilder" ref="[[currentRef]]"></html-builder>
    <paper-dialog id="filterDialog" on-iron-overlay-closed="_filterClosed">
      <track-filter id="mainTrackFilter" ref="[[currentRef]]"
        has-value="{{_filterHasValue}}">
      </track-filter>
      <div class="buttons">
        <paper-button dialog-confirm disabled$="[[!_filterHasValue]]">
          <iron-icon icon="filter-list"></iron-icon>
          Filter
        </paper-button>
        <paper-button dialog-dismiss>
          Cancel
        </paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
var GIVe = (function (give) {
  'use strict'

  give.TrackManager = Polymer({
    is: 'track-manager',

    properties: {
      currentRef: {
        type: String,
        value: '',
        observer: '_refChanged'
      },

      generatorMode: {
        type: Boolean,
        value: false,
        observer: '_generatorModeChanged'
      },

      numOfGroupsSelected: {
        type: Number
      },

      titleText: {
        type: String,
        value: 'Data Hub'
      },

      _filterHasValue: {
        type: Boolean
      },

      _filterDialogOn: {
        type: Boolean
      },

      _filterActive: {
        type: Boolean,
        computed: '_calcFilterActive(_trackFilter)'
      },

      _trackFilter: {
        type: Object,
        value: null
      },

      filterText: {
        type: String,
        value: 'Filter'
      }
    },

    generateHtml: function () {
      this.$.mainHtmlBuilder.createDialog(null,
        this.$.mainMetaList.selectedGroups,
        this.$.mainMetaList.selectedTracks
      )
    },

    _generatorModeChanged: function (newValue, oldValue) {
      if (oldValue && !newValue) {
        // this is toggling from enabled to disabled
        // check if there are tracks and/or groups selected
        if (this.numOfGroupsSelected) {
          // there are tracks and/or groups selected
          // TODO: use a `<paper-dialog>` get confirmation of clearing
          // the selection (can be done via Promise resolution/rejection)
          this.$.mainMetaList.clearSelection()
        }
      }
    },

    _refChanged: function (newRef, oldRef) {
      this.clearFilter()
    },

    _calcIntroHidden: function (currentRef) {
      return !!currentRef
    },

    _calcFilterActive: function (_trackFilter) {
      return !!_trackFilter
    },

    _filterClosed: function (e, detail) {
      if (this.$.filterDialog.closingReason.confirmed) {
        this._trackFilter = this.$.mainTrackFilter.createFilter()
        this.filterText = 'Filter: ' + this.$.mainTrackFilter.getFilterDesc()
        this.$.filterDialog.closingReason.confirmed = false
      }
      this._filterDialogOn = this.$.filterDialog.opened
    },

    toggleFilter: function () {
      this.$.filterDialog.toggle()
      this._filterDialogOn = this.$.filterDialog.opened
    },

    clearFilter: function (e) {
      if (e) {
        e.stopPropagation()
      }
      this._trackFilter = null
      this.filterText = 'Filter'
    }
  })

  return give
})(GIVe || {})
  </script>
</dom-module>
